<!--
鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。

其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。
-->
<script src='jquery-3.5.1.slim.min.js'></script>
<div id="testMouseMoveDiv" style="display: block; width: 800px; height: 300px; border: 1px solid #ccc;">在此区域移动鼠标试试</div>
<button id = 'testPopupButton'>OPEN WINDOW</button>
<p>mousemove: <span id="testMouseMoveSpan">pageX = 652, pageY = 3084</span></p>
<script>
    $(document).ready(function () {
    // on('submit', function)也可以简化:
        $('#testForm').submit(function () {
            alert('submit!');
        });
    });
    //equals $(function(){ })
    $(function () {
        $('#testMouseMoveDiv').mousemove(function(e) {
            $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
        })
    })


    var button1 = $('#testPopupButton');

    function popupTestWindow() {
        window.open('/');
    }
    //bind
    button1.click(function () {
        popupTestWindow();
    });

</script>

<form id="test-form" action="test">
    <legend>请选择想要学习的编程语言：</legend>
    <fieldset>
        <p>
            <label class="selectAll">
            <input type="checkbox"> 
            <span class="selectAll">全选</span>
            <span class="deselectAll">全不选</span>
            </label> 
            <a href="#0" class="invertSelect">反选</a>
        </p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
		<p><button type="submit">Submit</button></p>
    </fieldset>
</form>
<script>
'use strict';
var
    form = $('#test-form'),
    langs = form.find('[name=lang]'),
    selectAll = form.find('label.selectAll :checkbox'),
    selectAllLabel = form.find('label.selectAll span.selectAll'),
    deselectAllLabel = form.find('label.selectAll span.deselectAll'),
    invertSelect = form.find('a.invertSelect');

// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
    e.preventDefault();
    alert(form.serialize());
});

selectAll.change(function () {
    if(selectAll.is(':checked'))
    {
        langs.prop('checked', true);
        selectAllLabel.hide();
        deselectAllLabel.show();
    }
    else
    {
        langs.prop('checked', false);
        selectAllLabel.show();
        deselectAllLabel.hide();
    }
});

invertSelect.click(function () {
    langs.map(function (idx, x) {
        x.checked = x.checked ? false : true; 
    })
})

langs.change(function () { 
    if(langs.filter((i,x)=>{return !x.checked;}))
    {
        selectAll.change();
        console.log('all selected');
    }
    else
    {
        selectAllLabel.show();
        deselectAllLabel.hide();
        console.log('not all selected');
    }
})
</script>